<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>流程列表</title>
    <link type="text/css" rel="stylesheet" th:href="@{${skinPath} + '/css.css'}"/>
    <link rel="stylesheet" href="../js/bootstrap/css/bootstrap.min.css"/>
    <link href="../lte/css/font-awesome.min.css?v=4.4.0" rel="stylesheet"/>
    <link rel="stylesheet" href="../js/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="../js/soul-table/soulTable.css" media="all"/>
    <style>
        #searchTable {
            margin-top: 10px;
            margin-left: 5px;
        }
        /*.condSpan {
            display: inline-block;
            float: left;
            width: 205px;
            min-height: 32px;
        }*/
        .condBtnSearch {
            display: inline-block;
            float: left;
            width: 50px;
        }
        .search-form input, select {
            vertical-align: middle;
        }
        .search-form .tSearch {
            /*float: left;*/
        }
        .search-form input:not([type="radio"]):not([type="button"]):not([type="checkbox"]):not([type="submit"]) {
            width: 80px;
            line-height: 20px; /*否则输入框的文字会偏下*/
        }
        .unreaded {
            font-weight:bold;
        }
        i {
            margin-right: 3px;
        }
        .link-btn {
            margin-right: 15px;
        }
        .link-icon {
            margin-right: 5px;
        }
        .link-icon-show {
            color:#1ab394;
        }
        .link-icon-handle {
            color:#1c84c6;
        }
        .link-icon-attention {
            color:#ed5565;
        }
    </style>
    <script type="text/javascript" src="../inc/common.js"></script>
    <script src="../js/jquery-1.9.1.min.js"></script>
    <script src="../js/jquery-migrate-1.2.1.min.js"></script>
    <script src="../js/jquery-alerts/jquery.alerts.js" type="text/javascript"></script>
    <script src="../js/jquery-alerts/cws.alerts.js" type="text/javascript"></script>
    <link href="../js/jquery-alerts/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="../js/datepicker/jquery.datetimepicker.css"/>
    <script src="../js/datepicker/jquery.datetimepicker.js"></script>
    <script src="../js/BootstrapMenu.min.js"></script>
    <script src="../js/layui/layui.js" charset="utf-8"></script>

    <link href="../js/jquery-showLoading/showLoading.css" rel="stylesheet" media="screen"/>
    <script type="text/javascript" src="../js/jquery-showLoading/jquery.showLoading.js"></script>
    <script src="../js/jquery.toaster.flow.js"></script>

    <link href="../js/select2/select2.css" rel="stylesheet"/>
    <script src="../js/select2/select2.js"></script>

    <script src="../inc/map.js"></script>
</head>
<body>
<script th:inline="javascript" th:if="${isShowMsg}">
    $.toaster({priority: 'info', message: '[(${msg})]'});
</script>
<th:block th:if="${isNav}">
    <div th:replace="th/include/tab_flow_list :: nav(${myUserName}, ${flowPerformanceDisplay}, ${navIndex})"></div>
</th:block>
<table id="searchTable" style="width:100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <form class="search-form" action="flowListPage.do" method="get" onsubmit="return false">
                <span class="span-cond">
                    <th:block th:switch="${displayMode ne DISPLAY_MODE_SEARCH}">
                        <span th:case="true" class="condSpan">
                            类型
                            <select id="typeCode" name="f.typeCode" onchange="onTypeCodeChange(this)" style="width:170px;">
                                <option value="">[(#{limited})]</option>
                            </select>
                        </span>
                        <input th:case="*" id="typeCode" name="f.typeCode" th:value="${flowTypeCode}" type="hidden"/>
                        </th:block>
                        <span class="condSpan">
                            <select id="by" name="f.by">
                                <option value="title">[(#{tit})]</option>
                                <option value="flowId">[(#{number})]</option>
                            </select>
                            <input id="title" name="f.title" th:value="${flowTitle}" style="width:100px"/>
                        </span>
                        <th:block th:switch="${displayMode eq DISPLAY_MODE_DOING}">
                            <th:block th:case="true">
                                <span class="condSpan">
                                    [(#{organ})]
                                    <input id="starter" name="f.starter"/>
                                </span>
                                <span class="condSpan">
                                [(#{state})]
                                <select id="actionStatus" name="actionStatus">
                                    <option value="-1">不限</option>
                                    <option th:value="${STATE_RETURN}">[(${STATE_RETURN_NAME})]</option>
                                    <option th:value="${STATE_DOING}">[(${STATE_DOING_NAME})]</option>
                                </select>
                                </span>
                                </th:block>
                            <th:block th:case="*">
                                <span class="condSpan">
                                [(#{state})]
                                <select id="status" name="f.status">
                                    <option value="1000" selected>[(#{limited})]</option>
                                    <option th:value="${STATUS_NOT_STARTED}">[(${STATUS_NOT_STARTED_DESC})]</option>
                                    <option th:value="${STATUS_STARTED}">[(${STATUS_STARTED_DESC})]</option>
                                    <option th:value="${STATUS_FINISHED}">[(${STATUS_FINISHED_DESC})]</option>
                                    <option th:value="${STATUS_DISCARDED}">[(${STATUS_DISCARDED_DESC})]</option>
                                    <option th:value="${STATUS_REFUSED}">[(${STATUS_REFUSED_DESC})]</option>
                                </select>
                                </span>
                            </th:block>
                        </th:block>
                <span class="condSpan">
                从
                <input id="fromDate" name="f.fromDate" title="发起时间" style="width:106px"/>
                至
                <input id="toDate" name="f.toDate" title="发起时间" style="width:106px"/>
                </span>
                    <th:block th:if="isCondProps">
                        <th:block th:each="cond,stat : ${aryCond}">
                            <span class="condSpan">
                                [(${cond.fieldTitle})]
                                <th:block th:switch="${cond.typeOfField}">
                                    <th:block th:case="${TYPE_DATE}">
                                        <input th:name="${cond.fieldName + '_cond'}" th:value="${cond.condType}" type="hidden"/>
                                        <th:block th:if="${cond.condType eq '0'}">
                                            从
                                            <input th:id="${cond.fieldName + 'FromDate'}" th:name="${cond.fieldName + 'FromDate'}" size="15" th:value="${cond.fromDate}"/>
                                            至
                                            <input th:id="${cond.fieldName + 'ToDate'}" th:name="${cond.fieldName + 'ToDate'}" size="15" th:value="${cond.toDate}"/>
                                        </th:block>
                                        <th:block th:if="${cond.condType ne '0'}">
                                            <input th:id="${cond.fieldName}" th:name="${cond.fieldName}" class="cond-date" th:value="${cond.queryValue}"/>
                                        </th:block>
                                    </th:block>
                                    <th:block th:case="${TYPE_MACRO}">
                                        <th:block>[(${cond.ctlForQuery})]</th:block>
                                        <input th:name="${cond.fieldName} + '_cond'" th:value="${cond.condType}" type="hidden"/>
                                        <a th:id="'arrow' + ${stat.index}" href="javascript:;"><i class="fa fa-caret-down"></i></a>
                                        <script th:inline="javascript">
                                            $(document).ready(function () {
                                                o("[(${cond.fieldName})]").value = "[(${cond.queryValue})]";
                                                try {
                                                    o("[(${cond.fieldName})]_realshow").value = "[(${cond.queryValueRealShow})]";
                                                } catch (e) {
                                                }

                                                var isJudgeEmpty = [(${cond.isJudgeEmpty})];
                                                if (isJudgeEmpty) {
                                                    // 使=空或者<>空，获得焦点时即为选中状态，以便于修改条件的值
                                                    $("input[name='[(${cond.fieldName})]']").focus(function () {
                                                        if ($(this).val() == '[(${IS_EMPTY})]' || $(this).val() == '[(${IS_NOT_EMPTY})]') {
                                                            this.select();
                                                        }
                                                    });

                                                    var menu = new BootstrapMenu('#arrow[(${stat.index})]', {
                                                        menuEvent: 'click',
                                                        actions: [{
                                                            name: '等于空',
                                                            onClick: function () {
                                                                o('[(${cond.fieldName})]').value = '[(${IS_EMPTY})]';
                                                            }
                                                        }, {
                                                            name: '不等于空',
                                                            onClick: function () {
                                                                o('[(${cond.fieldName})]').value = '[(${IS_NOT_EMPTY})]';
                                                            }
                                                        }]
                                                    });
                                                }
                                            });
                                        </script>
                                    </th:block>
                                    <th:block th:case="numberic">
                                        <select th:name="${cond.fieldName} + '_cond'">
                                            <option value="=" selected="selected">=</option>
                                            <option value=">">></option>
                                            <option value="&lt;"><</option>
                                            <option value=">=">>=</option>
                                            </option>
                                            <option value="&lt;="><=</option>
                                        </select>
                                        <input th:name="${cond.fieldName}" style="width: 60px"/>
                                        <script th:inline="javascript">
                                            $(document).ready(function () {
                                                o("[(${cond.fieldName})]_cond").value = "[(${cond.nameCond})]";
                                                o("[(${cond.fieldName})]").value = "[(${cond.queryValue})]";
                                            });
                                        </script>
                                    </th:block>
                                    <th:block th:case="*">
                                        <th:block th:if="${cond.condType eq COND_TYPE_NORMAL}">
                                            <th:block th:if="${cond.type eq TYPE_SELECT}">
                                                <input th:name="${cond.fieldName} + '_cond'" th:value="${cond.condType}" type="hidden"/>
                                                <select th:id="${cond.fieldName}" th:name="${cond.fieldName}">
                                                    [(${cond.options})]
                                                </select>
                                                <script>
                                                    $(document).ready(function () {
                                                        o("[(${cond.fieldName})]").value = "[(${cond.queryValue})]";
                                                    });
                                                </script>
                                            </th:block>
                                            <th:block th:if="${cond.type eq TYPE_RADIO}">
                                                <input th:name="${cond.fieldName} + '_cond'" th:value="${cond.condType}" type="hidden"/>
                                                <th:block th:each="jsonR : ${aryRadio}">
                                                    <input type="radio" th:id="${cond.fieldName}" th:name="${cond.fieldName}" th:value="${jsonR.val}"/>[(${jsonR.text})]
                                                </th:block>
                                            </th:block>
                                            <th:block th:if="${cond.type eq TYPE_CHECKBOX}">
                                                <th:block th:each="jsonChk,statChk : ${aryChk}">
                                                    <input th:name="${jsonChk.fieldName + '_cond'}" th:value="${cond.condType}" type="hidden"/>
                                                    <input type="checkbox" th:id="${jsonChk.fieldName}" th:name="${jsonChk.fieldName}" th:value="${jsonChk.val}" th:style="${statChk.size > 1? 'width:200px' : ''}"/>
                                                    <script th:inline="javascript">
                                                        $(function () {
                                                            o('[(${jsonChk.fieldName})]').checked = [(${jsonChk.queryValue eq jsonChk.val ? 'true':'false'})];
                                                        })
                                                    </script>
                                                    <th:block th:text="${statChk.size > 1? jsonChk.text : ''}"></th:block>
                                                </th:block>
                                            </th:block>
                                        </th:block>
                                        <th:block th:if="${!cond.isSpecial}">
                                            <input th:name="${cond.fieldName} + '_cond'" th:value="${cond.condType}" type="hidden"/>
                                            <input th:id="'field' + ${stat.index}" th:name="${cond.fieldName}" style="width: 60px"/>
                                            <a th:id="'arrow' + ${stat.index}" href="javascript:;"><i class="fa fa-caret-down"></i></a>
                                            <script th:inline="javascript">
                                                $(function () {
                                                    o("[(${cond.fieldName})]").value = "[(${cond.queryValue})]";
                                                    // 使=空或者<>空，获得焦点时即为选中状态，以便于修改条件的值
                                                    $("#field[(${stat.index})]").focus(function () {
                                                        if ($(this).val() == '[(${IS_EMPTY})]' || $(this).val() == '[(${IS_NOT_EMPTY})]') {
                                                            this.select();
                                                        }
                                                    });

                                                    var menu = new BootstrapMenu('#arrow[(${stat.index})]', {
                                                        menuEvent: 'click',
                                                        actions: [{
                                                            name: '等于空',
                                                            onClick: function () {
                                                                $('#field[(${stat.index})]').val('[(${IS_EMPTY})]');
                                                            }
                                                        }, {
                                                            name: '不等于空',
                                                            onClick: function () {
                                                                $('#field[(${stat.index})]').val('[(${IS_NOT_EMPTY})]');
                                                            }
                                                        }]
                                                    });
                                                });
                                            </script>
                                        </th:block>
                                    </th:block>
                                </th:block>
                            </span>
                        </th:block>
                    </th:block>
                    <input name="op" value="search" type="hidden"/>
                    <input name="action" th:value="${action}" type="hidden"/>
                    <input name="myname" th:value="${myUserName}" type="hidden"/>
                </span>
                <input type="submit" value='搜索' class="search-btn" />
            </form>
        </td>
    </tr>
</table>
<table class="layui-hide" id="table_list"></table>
<script type="text/html" id="toolbar_list">
    <div class="layui-btn-container">
        <button th:if="${canDisposeBatch}" class="layui-btn layui-btn-sm layui-btn-primary layui-border-green" lay-event="agree" th:title="#{agree}"><i class="fa fa-check-square-o"></i>[(#{agree})]</button>
        <button th:if="${isExport}" class="layui-btn layui-btn-sm layui-btn-primary layui-border-green" lay-event="export" th:title="#{export}"><i class="fa fa-file-excel-o"></i>[(#{export})]</button>
        <button th:if="${isAdminFlow and isFlowTypeSelected}" class="layui-btn layui-btn-sm layui-btn-primary layui-border-green" lay-event="conds" th:title="#{conds}"><i class="fa fa-cog"></i>[(#{conds})]</button>
        <button th:if="${isAdminFlow}" class="layui-btn layui-btn-sm layui-btn-primary layui-border-green" lay-event="resetColProps" th:title="#{resetColProps}"><i class="fa fa-repeat"></i>[(#{resetColProps})]</button>
    </div>
</script>
<script th:inline="javascript">
    // 将tabIdOpener传至flow_dispose.jsp，以便于在流程处理后刷新待办列表
    var tabIdOpener = getActiveTabId();

    var tableData;
    layui.config({
        base: '../js/',   // 第三方模块所在目录
        // version: 'v1.6.2' // 插件版本号
    }).extend({
        soulTable: 'soul-table/soulTable',
        tableChild: 'soul-table/tableChild',
        tableMerge: 'soul-table/tableMerge',
        tableFilter: 'soul-table/tableFilter',
        excel: 'soul-table/excel',
    });

    layui.use(['table', 'soulTable'], function () {
        var table = layui.table;
        var soulTable = layui.soulTable;

        table.render({
            elem: '#table_list'
            , toolbar: '#toolbar_list'
            , defaultToolbar: ['filter', 'print'/*, 'exports', {
				title: '提示'
				,layEvent: 'LAYTABLE_TIPS'
				,icon: 'layui-icon-tips'
			}*/]
            , drag: {toolbar: true}
            , method: 'post'
            , url: 'list.do?typeCode=[(${flowTypeCode})]&action=[(${action})]&displayMode=[(${displayMode})]&tabIdOpener=' + tabIdOpener
            , cols: [
                [(${colProps})]
            ]
            , id: 'tableList'
            , page: true
            , unresize: false
            , limit: 20
            , height: 'full-98'
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.errCode, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.total, //解析数据长度
                    "data": res.rows //解析数据列表
                };
            }
            , done: function (res, curr, count) {
                tableData = res.data;
                soulTable.render(this);
            }
        });

        // 头工具栏事件
        table.on('toolbar()', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'conds':
                    addTab('条件', 'flow/flow_field_conds.jsp?typeCode=[(${flowTypeCode})]');
                    break;
                case 'export':
                    window.location.href = "flow_query_result_export.jsp?" + $('form').serialize() + "&typeCode=[(${flowTypeCode})]";
                    break;
                case 'agree':
                    var data = checkStatus.data;
                    if (data.length == 0) {
                        layer.msg('请选择记录');
                        return;
                    }

                    var ids = '';
                    for (var i in data) {
                        var json = data[i];
                        if (ids == '') {
                            ids = json.id;
                        } else {
                            ids += ',' + json.id;
                        }
                    }
                    layer.confirm('[(#{isArgee})]', {icon: 3, title: '[(#{prompt})]'}, function (index) {
                        $.ajax({
                            type: "POST",
                            url: "../public/flow/finishBatch.do",
                            data: {
                                action: "finishBatch",
                                ids: ids
                            },
                            beforeSend: function(XMLHttpRequest){
                                $('body').showLoading();
                            },
                            success: function (html) {
                                var json = jQuery.parseJSON(html);
                                json.msg = json.msg.replace(/\\r/ig, "<BR/>");
                                if (json.ret == "1") {
                                    layer.alert(data.msg, {
                                        btn: ['确定'],
                                        yes: function() {
                                            doQuery();
                                        }
                                    });
                                } else {
                                    layer.msg(json.msg);
                                }
                            },
                            complete: function(XMLHttpRequest, status){
                                $('body').hideLoading();
                            },
                            error: function(XMLHttpRequest, textStatus){
                                // 请求出错处理
                                alert("error:" + XMLHttpRequest.responseText);
                            }
                        });
                    });
                    break;
                case 'resetColProps':
                    layer.confirm('[(#{isResetColProps})]', {icon: 3, title: '提示'}, function (index) {
                        $.ajax({
                            type: "post",
                            url: "resetColProps.do",
                            data: {
                                typeCode: '[(${flowTypeCode})]',
                                displayMode: [(${displayMode})]
                            },
                            dataType: "html",
                            beforeSend: function (XMLHttpRequest) {
                                $('body').showLoading();
                            },
                            success: function (data, status) {
                                data = $.parseJSON(data);
                                if (data.res === 0) {
                                    layer.alert(data.msg, {
                                        btn: ['确定'],
                                        yes: function() {
                                            window.location.reload();
                                        }
                                    });
                                } else {
                                    layer.msg(data.msg);
                                }
                            },
                            complete: function (XMLHttpRequest, status) {
                                $('body').hideLoading();
                            },
                            error: function (XMLHttpRequest, textStatus) {
                                jAlert(XMLHttpRequest.responseText, '[(#{prompt})]');
                            }
                        });

                    });
                    break;
            }
        });

        $('.search-form .search-btn').on('click', function (e) {
            e.preventDefault();
            table.reload('tableList', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                , where: $('.search-form').serializeJsonObject()
            }, 'data');
        });

        //监听表格排序问题
        table.on('sort()', function (obj) { //注：sort lay-filter="对应的值"
            table.reload('tableList', { //testTable是表格容器id
                initSort: obj // 记录初始排序，如果不设的话，将无法标记表头的排序状态。 layui 2.1.1 新增参数
                , where: {
                    orderBy: obj.field //排序字段
                    , sort: obj.type //排序方式
                }
            });
        });
    });

    $(document).ready(function () {
        $('#fromDate').datetimepicker({
            lang: 'ch',
            timepicker: false,
            format: 'Y-m-d'
        });
        $('#toDate').datetimepicker({
            lang: 'ch',
            timepicker: false,
            format: 'Y-m-d'
        });
        $("[name$='FromDate']").datetimepicker({
            lang: 'ch',
            timepicker: false,
            format: 'Y-m-d'
        });
        $("[name$='ToDate']").datetimepicker({
            lang: 'ch',
            timepicker: false,
            format: 'Y-m-d'
        });
        $('.cond-date').datetimepicker({
            lang: 'ch',
            timepicker: false,
            format: 'Y-m-d'
        });
    });

    // 刷新
    function doQuery() {
        layui.table.reload('tableList');
    }

    [# th:if="${displayMode ne DISPLAY_MODE_SEARCH}"]
    function onTypeCodeChange(obj) {
        if(obj.options[obj.selectedIndex].value=='not'){
            jAlert(obj.options[obj.selectedIndex].text+' {(#{notBeSelect})}','{(#{prompt})}');
            return false;
        }
        window.location.href = "flowListPage.do?op=search&action=[(${action})]&displayMode=[(${displayMode})]&typeCode=" + obj.options[obj.selectedIndex].value;
    }

    // ajax取得流程目录树，在流程类型较多的时候可以提升加载体验
    $(function() {
        $.ajax({
            type: "post",
            url: "getTree.do",
            data: {
                op: "getTree",
            },
            dataType: "html",
            beforeSend: function(XMLHttpRequest) {
            },
            success: function(data, status) {
                $("#typeCode").empty();
                data = "<option value=''>[(#{limited})]</option>" + data;
                $("#typeCode").append(data);
                o("f.typeCode").value = "[(${flowTypeCode})]";
            },
            complete: function(XMLHttpRequest, status) {
            },
            error: function(XMLHttpRequest, textStatus) {
                jAlert(XMLHttpRequest.responseText,'[(#{prompt})]');
            }
        });
    });
    [/]

    [# th:if="${displayMode eq DISPLAY_MODE_DOING}"]
    $(function () {
        [# th:switch="${myUserName eq curUserName}"]
            [# th:case="true"]
            setActiveTabTitle("待办流程");
            [/]
            [# th:case="*"]
            setActiveTabTitle('[(${myRealName})]的待办流程');
            [/]
        [/]
    });
    [/]

    [# th:if="${(displayMode eq DISPLAY_MODE_DOING) or (displayMode eq DISPLAY_MODE_ATTEND) or (displayMode eq DISPLAY_MODE_MINE)}"]
    // 关注流程
    function favorite(id) {
        $.ajax({
            type: "post",
            url: "favorite.do",
            data: {
                flowId: id
            },
            dataType: "html",
            beforeSend: function (XMLHttpRequest) {
                $('body').showLoading();
            },
            success: function (data, status) {
                data = $.parseJSON(data);
                layer.msg(data.msg);
            },
            complete: function (XMLHttpRequest, status) {
                $('body').hideLoading();
            },
            error: function (XMLHttpRequest, textStatus) {
                jAlert(XMLHttpRequest.responseText, '[(#{prompt})]');
            }
        });
    }
    [/]
    [# th:if="${displayMode eq DISPLAY_MODE_FAVORIATE}"]
    // 取消关注
    function unfavorite(id) {
        layer.confirm('[(#{toCancelAttention})]', {icon: 3, title: '[(#{prompt})]'}, function (index) {
            $.ajax({
                type: "post",
                url: "unfavorite.do",
                data: {
                    flowId: id
                },
                dataType: "html",
                beforeSend: function(XMLHttpRequest){
                    $('body').showLoading();
                },
                success: function(data, status){
                    data = $.parseJSON(data);
                    if (data.ret=="0") {
                        layer.msg(data.msg);
                    }
                    else {
                        layer.msg(data.msg);
                        doQuery();
                    }
                },
                complete: function(XMLHttpRequest, status){
                    $('body').hideLoading();
                },
                error: function(XMLHttpRequest, textStatus){
                    jAlert(XMLHttpRequest.responseText,'[(#{prompt})]');
                }
            });
        });
    }
    [/]
    [# th:if="${'sel' eq action}"]
    function selFlow(id, title) {
        var dlg = window.opener ? window.opener : dialogArguments;
        dlg.setIntpuObjValue(id, "<a href='../flowShowPage.do?flowId=" + id + "' target='_blank'>" + title + "</a>");
        window.close();
    }
    [/]

    // 保存显示列配置
    function saveColProps() {
        var isAdmin = [(${isAdmin})];
        if (!isAdmin) {
            return;
        }

        var mapFields = new Map();
        var str = '';
        $('.layui-table-header th').each(function (i) {
            // 忽略操作列
            var name = $(this).data("field");
            if (mapFields.containsKey(name)) {
                // 可能因为操作列是fixed（冻结），layui table生成了一个隐藏的操作列，故需过滤掉，当然其它冻结列也有可能产生此情况
                return;
            }
            var title = $(this).text();
            // 如果是行首的复选框列
            if (name == '0' || title == '') {
                return;
            }

            var hide = $(this).css("display") == "none" ? true : false;
            var sortable = true;
            var align = $(this).attr("align");
            if (!align) {
                align = "";
            }

            // 最后处理、操作、当前处理、剩余时间，这些列不能排序
            if (name=="f.finallyApply" || name=="operate" || name=="f.currentHandle" || name=="f.remainTime") {
                sortable = false;
            }

            mapFields.put(name, title);
            if (str == '') {
                str = "{title: '" + title + "', field : '" + name + "', width : " + $(this).width() + ", sort : " + sortable + ", align: '" + align + "', hide: " + hide + (name!='operate' ? "" : ", fixed:'right'") + "}";
            } else {
                str += ",{title: '" + title + "', field : '" + name + "', width : " + $(this).width() + ", sort : " + sortable + ", align: '" + align + "', hide: " + hide + (name!='operate' ? "" : ", fixed:'right'") + "}";
            }
        });
        str = "[" + str + "]";

        $.ajax({
            type: "POST",
            url: "saveSearchColProps.do",
            data: "colProps=" + str + "&typeCode=[(${flowTypeCode})]",
            beforeSend: function(XMLHttpRequest){
                $('body').showLoading();
            },
            success: function (html) {
                var json = jQuery.parseJSON(html);
                if (json.ret == "1") {
                    // 当点击表头时会产生此事件，未找到优化办法，故不显示操作成功
                    /*$.toaster({
                        "priority" : "info",
                        "message" : json.msg
                    });*/
                } else {
                    jAlert("保存列调整失败！", "提示");
                }
            },
            complete: function(XMLHttpRequest, status){
                $('body').hideLoading();
            },
            error: function(XMLHttpRequest, textStatus){
                // 请求出错处理
                alert("error:" + XMLHttpRequest.responseText);
            }
        });
    }

    $(function() {
        $('body').addClass('form-inline');
        $('input, select, textarea').each(function() {
            if (!$(this).hasClass('ueditor') && !$(this).hasClass('btnSearch') && !$(this).hasClass('tSearch') && $(this).attr('type') != 'hidden' && $(this).attr('type') != 'file') {
                $(this).addClass('form-control');
                $(this).attr('autocomplete', 'off');
            }
        });
    })

    $.fn.serializeJsonObject = function () {
        var json = {};
        var form = this.serializeArray();
        $.each(form, function () {
            if (json[this.name]) {
                if (!json[this.name].push) {
                    json[this.name] = [json[this.name]];
                }
                json[this.name].push();
            } else {
                json[this.name] = this.value || '';
            }
        });
        return json;
    }

    function onSoulTableDragEnd() {
        saveColProps();
    }

    $(document).on('mouseup','.layui-table-header th',function(e){
        // @Task 当拖动列重新排放时也会产生此事件
        // console.log($(this).width());
        saveColProps();
    });
</script>
</body>
</html>